<!--
 * @Author: Binggan
 * @Date: 2020-03-01 18:48:56
 * @LastEditors: Binggan
 * @LastEditTime: 2020-03-03 14:03:07
 * @Description: 公益项目管理
 -->
 <template>
  <div class="content-wrap">
    <Divider class="divider" orientation="left">
      <h2>公益项目管理</h2>
    </Divider>
    <div class="manager-box">
      <Button type="primary" size='large' @click="addNewType">添加公益项目</Button>
    </div>
    <!-- 列表 -->
    <Table stripe :columns="columns1" :data="data1" class="m-t-20">
      <template slot-scope="{ row, index }" slot="action">
        <div style="display:inline-block">
          <Button type="warning" size="small" style="margin-right: 5px" @click="edit(row)">编辑</Button>
          <Button type="error" size="small" @click="deleteEquipment(row)">删除</Button>
        </div>

      </template>
    </Table>
    <mPagination :count="count" :page="page" :pageSize="pageSize" @page-change="changePage"></mPagination>

    <!-- 用户添加修改 -->
    <Modal v-model="modal1" :title="isAdd?'添加新闻类型':'修改新闻类型'" :mask-closable="false" class-name="bing-modal">
      <!--@on-ok="amend" @on-cancel="cancAmend"-->
      <Form ref="formTypeInfo" :model="currentData" :rules="ruleValidate" :label-width="80">
        <FormItem label="公益名称" prop="name">
          <Input v-model="currentData.name"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="cancAmend">取消</Button>
        <Button type="primary" size="large" :loading="amendLoading" @click="amend">确认{{isAdd?'添加':'修改'}}</Button>
      </div>
    </Modal>
    <!--删除对话框 -->
    <Modal v-model="modal2">
      <p slot="header" style="color:#f60">
        <Icon type="ios-information-circle"></Icon>
        <span>删除确认</span>
      </p>
      <div style="font-size:14px">
        <p style="color:#000">请确认是否删除这条数据?</p>
        <ul class="department-delinfo">
          <li><span class="title">名称：</span><span>{{tempEquip.name}}</span></li>
        </ul>
      </div>
      <div slot="footer">
        <Button type="primary" size="large" @click="modal2=false">取消</Button>
        <Button type="error" size="large" @click="toDelete">确认删除</Button>
      </div>
    </Modal>
  </div>
</template>
 
 <script>
import { mapState, mapMutations } from "vuex";
import mPagination from "@/components/myPagination";
import qs from 'qs'
export default {
  data() {
    return {
      newsType: [],
      columns1: [
        { title: "项目名称", key: "name", sortable: true },
        {
          title: "创建时间",
          key: "createTime"
        },
        {
          title: "操作",
          slot: "action"
        }
      ],
      currentData: { name: "" },
      modal1: false,
      isAdd: false,
      modal2: false,
      ruleValidate: {
        name: [{ required: true, message: "请输入名称！", trigger: "blur" }]
      },
      tempEquip: {},
      count: 0,
      page: 1,
      pageSize: 10,
      amendLoading: false
    };
  },
  computed: {
    data1() {
      //章节
      let startNum = (this.page - 1) * this.pageSize;
      let endNum =
        this.page * this.pageSize > this.count
          ? this.count
          : this.page * this.pageSize;
      console.log(startNum, endNum);
      return this.newsType.slice(startNum, endNum);
    }
  },
  components: {
    mPagination
  },
  methods: {
    getNewsTypes() {
      this.$axios.get("/publicWelfare/findAll").then(res => {
        this.count = res.data.length;
        this.newsType = res.data;
      });
    },
    changePage(page) {
      //分页
      this.pagge = page;
    },
    addNewType() {
      this.isAdd = true;
      this.currentData = {};
      this.modal1 = true;
    },
    edit(item) {
      //点击编辑
      this.isAdd = false;
      this.currentData = JSON.parse(JSON.stringify(item));
      this.modal1 = true;
    },
    cancAmend() {
      this.modal1 = false;
      this.$refs["formTypeInfo"].resetFields();
    },
    amend() {
      this.$refs["formTypeInfo"].validate(valid => {
        if (valid) {
          let url = this.isAdd ? "/publicWelfare/add" : "/publicWelfare/upd";
          let data = JSON.parse(JSON.stringify(this.currentData));
          console.log(data)
          this.amendLoading = true;
          this.$axios.post(url,qs.stringify(data)).then(res => {
            this.amendLoading = false;
            if (res.errorCode == 0) {
              this.$Message.success("操作成功!");
              this.modal1 = false;
              this.$refs["formTypeInfo"].resetFields();

              this.page = 1;
              this.getNewsTypes();
            }
          });
        } else {
          this.amendLoading = false;
          this.$Message.error("请检查无误后提交!");
        }
      });
    },
    deleteEquipment(item) {
      //点击删除
      this.tempEquip = item;
      this.modal2 = true;
    },
    toDelete() {
      //确认删除
      this.$axios
        .post("/publicWelfare/del", qs.stringify({ id: this.tempEquip.id }))
        .then(res => {
          this.amendLoading = false;
          if (res.errorCode == 0) {
            this.$Message.success("操作成功!");
            this.modal2 = false;
            this.page = 1;
            this.getNewsTypes();
          }
        });
    }
  },
  created() {
    this.getNewsTypes();
  }
};
</script>
 
 <style lang="scss" scoped>
</style>
